<template>
	<div class="shipinjiance">
		<div class="shipinjian" v-if="$store.state.denglu">
			<div class="shipinjiancetou">
				<span>视频监测</span>
			</div>
			<div class="shipinjianshen">
				<div class="shipinjianshentou">
					<div class="shipinjianshentou1">
						<span>
							<i class="el-icon-notebook-2"></i>
						</span>
						<span>
							共4个任务
						</span>
					</div>
					<div class="shipinjianshentou2">
						<span>本月已使用0次,剩余300次</span>
						<span>
							+加入达人池
						</span>
					</div>
				</div>
				
				<div class="shipinbiaoge">
					<table cellpadding="0" cellspacing="0">
						<thead>
							<tr>
								<th>任务名称</th>
								<th>平台</th>
								<th>监测周期</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						
						<tbody>
							<tr v-for="(item,index) in 5" :key="index">
								<td>
									<div class="shibiaogeleft">
										<img src="../../../assets/img/shuyan.png" />
									</div>
									<div class="shibiaogeright">
										<p>
											网上段子城镇了！酒家司机翻墙逃跑,结果...翻到了武警大院网上段子城镇了！酒家司机翻墙逃跑,结果
										</p>
										<p>
											<img src="../../../assets/img/xiaoyang.png" />
											<span>小辉在路上</span>
											<span>发布时间：2019-02-12 16:50</span>
										</p>
										<p>
											备注:---<span>修改</span>
										</p>
									</div>
								</td>
								<td>
									<img src="../../../assets/img/douyin.png" />
								</td>
								<td>
									2019-02-18 10:20 至2019-02-18 22:20
								</td>
								<td>
									已结束
								</td>
								<td @click="shanchu(index)">
									<i class="el-icon-delete"></i>
								</td>
							</tr>
						</tbody>
					</table>
					
					<el-dialog
					  title="提示"
					  :visible.sync="centerDialogVisible"
					  width="30%"
					  left>
					  <span class="shanchuma">确认删除吗？</span>
					  <span slot="footer" class="dialog-footer">
					    <el-button @click="centerDialogVisible = false">取 消</el-button>
					    <el-button type="primary" @click="queshan">确 定</el-button>
					  </span>
					</el-dialog>
				</div>
				
				<div class="fenye" style="text-align: center;">
					<el-pagination
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :hide-on-single-page="yindi"
					  :current-page="currentPage4"
					  :page-sizes="[100, 200, 300, 400]"
					  :page-size="100"
					  layout="total, sizes, prev, pager, next, jumper"
					  :total="4001">
					</el-pagination>
				</div>
				
			</div>
		</div>
		
		<jinzhi :wenben="wenben" v-else></jinzhi>
		
		
	</div>
</template>

<script>
	import jinzhi from "@/components/components/jinzhiye.vue"
	export default{
		name:"shipinjiance",
		components:{
			jinzhi
		},
		data(){
			return{
				wenben:"视频监测实时展示视频数据趋势、舆情热词及粉丝画像，帮助用户第一时间掌握营销动丝画像，帮助用户第一-时间掌握营销动态，洞察真实传播效果",
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				//删除
				centerDialogVisible:false,
				shanId:''
			}
		},
		mounted() {
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
		},
		methods:{
			//删除
			shanchu(index){
				this.centerDialogVisible = true;
				this.shanId=index;
			},
			//确认删除
			queshan(){
				this.centerDialogVisible = false;
				console.log(this.shanId);
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		// padding: 0;
	}
	.shipinjiance{
		
		.shipinjiancetou{
			padding: 0 0.6rem;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			
			span{
				font-size: 0.6rem;
				display: inline-block;
				margin-left:0.3rem ;
				color: #333333;
				letter-spacing: 0.05rem;
			}
			
			span::before{
				content: "";
				display: block;
				position: absolute;
				top: 0.4rem;
				left: 0;
				width: 0.3rem;
				height: 1rem;
				background-color: #0091FF;
			}
		}
		
		.shipinjianshen{
			padding: 0.8rem;
			margin-top:1rem ;
			background-color: #fff;
			border-radius:0.1rem ;
			
			.shipinjianshentou{
				
				.shipinjianshentou1{
					float: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					span:nth-of-type(1){
						display: block;
						color: #666666;
						font-size: 0.6rem;
					}
					span:nth-of-type(2){
						margin-left:0.4rem ;
						display: block;
						color: #666;
						font-size: 0.4rem;
					}
				}
				.shipinjianshentou2{
					float: right;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					span:nth-of-type(1){
						display: block;
						color: #666666;
						font-size: 0.4rem;
						margin-right:0.8rem ;
						letter-spacing: 0.05rem;
					}
					span:nth-of-type(2){
						cursor: pointer;
						display: block;
						color: #0091FF;
						font-size: 0.4rem;
						padding: 0.1rem 0.3rem;
						border: 1px solid #ECECEC;
						border-radius:0.1rem ;
					}
					span:nth-of-type(2):hover{
						background-color:#0091FF ;
						color: #fff;
					}
				}
			}
			.shipinjianshentou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.shipinbiaoge{
				
				table{
					width: 100%;
					margin-top: 0.6rem;
					
					th{
						color: #333333;
						font-size: 0.5rem;
						padding: 1rem 0;
						font-weight: normal;
					}
					th:nth-of-type(1){
						float: left;
					}
						
					td{
						padding: 0.4rem 0;
						text-align: center;
						color: #333333;
						font-size: 0.4rem;
					}
					td:nth-of-type(1){
						text-align: left;
						width: 19rem;
						.shibiaogeleft{
							float: left;
							img{
								width: 5rem;
							}
						}
						.shibiaogeright{
							margin-left:0.6rem ;
							float: left;
							color: #666;
							
							p:nth-of-type(1){
								width: 12rem;
								font-size: 0.4rem;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							p:nth-of-type(2){
								width: 12rem;
								margin: 0.6rem 0;
								display: flex;
								align-items: center;
								img{
									width: 0.8rem;
								}
								span:nth-of-type(1){
									display: block;
									text-align: center;
									font-size: 0.35rem;
									margin-left:0.4rem ;
								}
								span:nth-of-type(2){
									width: 7rem;
									display: block;
									text-align: center;
									font-size: 0.35rem;
									color: #999999;
									margin-left:1rem ;
									
									overflow : hidden;
									text-overflow: ellipsis;
									display: -webkit-box; 
									-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
									-webkit-box-orient: vertical;
								}
							}
							p:nth-of-type(3){
								font-size: 0.35rem;
								
								span{
									margin-left:0.2rem ;
									cursor: pointer;
									color: #0091FF;
								}
							}
						}
					}
					td:nth-of-type(1)::after{
						content: "";
						display: block;
						clear: both;
					}
					td:nth-of-type(4){
						color: #00A588;
					}
					td:nth-of-type(5){
						i{
							cursor: pointer;
							padding: 0.2rem;
							color: #999;
						}
					}
				}
				.shanchuma{
					display: block;
					text-align: center;
					font-size: 0.4rem;
				}
			}
		}
		
	}
</style>
